<template>
  <div>
    <div class="container">
      <!-- 侧边导航区域 -->
      <div class="sidenav">
        <ul class="sidenav-ul">
          <li
            v-for="(item, index) in sideNavList"
            :key="index"
            class="sidenav-item"
          >
            <span class="title" @click="overItem(index)"> {{ item.typeName }}</span>
            <div class="children">
              <ul  class="menuList">
                <li class="menuItem" v-for="menu in varityList" :key="menu.id" @click="slideClick(menu.id)">
                      <img
                        :src="menu ? menu.coverImg : '/imgs/item-box-1.png'"
                        alt=""
                      />
                    <span class="menuItem-name">{{
                      menu ? menu.goodsName : "二手交易系统"
                    }}</span>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
      <!-- 轮播图区域 -->
      <swiper :options="swiperOption" class="swiper-box">
        <!-- slides -->
        <swiper-slide
          class="swiper-item"
          v-for="(item, index) in sildeList"
          :key="index"
        >
            <img :src="item.coverImg" alt="" class="swiper-img" @click="slideClick(item.id)" />
        </swiper-slide>
        <!-- Optional controls -->
        <!-- 轮播图分页器 -->
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import { mapMutations } from 'vuex';
export default {
  name: "IndexSwiper",
  components: {
    swiper,
    swiperSlide,
  },
  // props: {
  //   sildeList: {
  //     type: Array,
  //     default: []
  //   }
  // },
  data() {
    return {
      varityList: [],
      sildeList: [],
      swiperOption: {
        // 设置分页器
        pagination: ".swiper-pagination",
        // 分页器是否可点击
        paginationClickable: true,
        // 循环播放，无缝循环
        loop: true,
        // 设置自动播放且设置轮播间隔时间duration
        autoplay: 5000,
        // 滑动播放速度
        speed: 1000,
        // 前一个
        prevButton: ".swiper-button-prev",
        // 后一个
        nextButton: ".swiper-button-next",
        // 动画
        effect: "cube",
        //动画参数
        cubeEffect: {
          slideShadows: true,
          shadow: true,
          shadowOffset: 100,
          shadowScale: 0.6,
        },
      },
      sideNavList: [], // 侧边栏分类列表
      pageQuery: {
        pageNum: 1,
        pageSize: 10
      },
    };
  },
  created () {
    this.getVarity()
  },
  mounted () {
    this.$nextTick(() => {
      this.getNavBanner()
    })
  },
  methods: {
    ...mapMutations(['set_nav']),
    overItem (index) {
      // let query = {
      //   typeId: item.id
      // }
      // this.$api.shop.getGoodsByVarity(query).then(res => {
      //   if (res.code === 200) {
      //     this.varityList = res.data.records
      //   }
      // })
      this.set_nav(index)
    },
    /**
     * 获取顶部banner列表
     */
    getNavBanner () {
      this.$api.shop.getBannerList(this.pageQuery).then(res => {
        if (res.code === 200) {
          this.sildeList = res.data.records
        }
      })
    },
    /**
     * 获取分类列表
     */
    getVarity (){
      this.$api.shop.getVarityList().then(res => {
        if (res.code === 200) {
          this.sideNavList = res.data
        }
      })
    },
    /**
     * 去商品详情页
     */
    slideClick (id) {
      this.$router.push({
        path: `/detail/${id}`
      })
    }
  },
};
</script>
<style scoped>
.container {
  width: 1226px;
  height: 451px;
  /* position: relative; */
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  overflow: hidden;
}
/* 侧边导航栏样式 */
.sidenav {
  /* position: absolute; */
  box-sizing: border-box;
  /* z-index: 10; */
  width: 264px;
  height: 451px;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 25px 0;
}
.sidenav-ul{
  height: 400px;
  overflow: auto;
}
.sidenav-ul::-webkit-scrollbar {
width:8px;
height:8px;
}
/*滚动条里面小方块样式*/
.sidenav-ul::-webkit-scrollbar-thumb {
border-radius:100px;
-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
background:#ff6600;
}
/*滚动条里面轨道样式*/
.sidenav-ul::-webkit-scrollbar-track {
-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
border-radius:0;
background:rgba(0,0,0,0.1);
}
.sidenav-item {
  height: 50px;
  cursor: pointer;
}
.sidenav-item .title {
  position: relative;
  display: inline-block;
  width: 100%;
  text-indent: 30px;
  line-height: 50px;
  font-size: 16px;
  color: #fff;
}
/* 这是侧边导航展开区域 */
.sidenav-item .children {
  box-sizing: border-box;
  position: absolute;
  width: 964px;
  height: 451px;
  background-color: #fff;
  top: 0;
  left: 264px;
  padding-top: 15px;
  display: none;
}
.sidenav-item .title::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 15px;
  background-color: slateblue;
  right: 30px;
  top: 18px;
  background: url("/imgs/icon-arrow.png") no-repeat;
  background-size: 10px;
}

.menuList {
  /* height: 70px; */
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  padding: 0 3%;
}
li.menuItem {
  /* height: 70px; */
  flex: 0 1 24%;
  display: flex;
  align-items: center;
  flex-flow: row nowrap;
  margin-top: 15px;
}
li.menuItem img {
  width: 120px;
  height: 80px;
  /* height: 42px; */
}
li.menuItem .menuItem-name {
  font-size: 14px;
  color: #333333;
  margin-left: 15px;
}

/* .sidenav-item:hover {
  background-color: #fd5902;
}
.sidenav-item:hover .children {
  display: block;
} */
.swiper-box{
  width: 950px;
}
/* 轮播图区域样式 */
.swiper-item {
  text-align: center;
}
.swiper-item img {
  width: auto;
  height: 451px;
}
.swiper-button-prev {
  /* margin-left: 264px; */
}
</style>
